<template>
  <div class="upload-container">
      <el-select v-model="channelForm.channelContinentID" placeholder="请选择">
        <el-option
        v-for="item in continentOptions"
        :key="item.ID"
        :label="item.channelName"
        :value="item.ID">
        </el-option>
    </el-select>
      <el-select v-model="channelForm.channelCountryID" placeholder="请选择">
        <el-option
        v-for="item in countryOptions"
        :key="item.ID"
        :label="item.channelName"
        :value="item.ID">
        </el-option>
    </el-select>
  </div>
</template>

<script>
import { getChannelUsableList } from '@/api/knowledge/channel'

export default {
  name: 'RegionSimple',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      channelForm:{
        channelContinentID:0,
        channelCountryID:0,      //国
        channelProvinceID:0,     //省
        channelCityID:0,         //市
        channelCountyID:0,       //县/区
        channelTownID:0          //镇
      },
      selectedChannelIDs:[],          //最近一次选择的区域信息
      continentOptions:[],
      countryOptions:[],
      provinceOptions:[],
      cityOptions:[],
      countyOptions:[],
      townOptions:[]
    }
  },
  computed: {
    imageUrl() {
      return this.value
    }
  },
  created() {
    this.getRegionList()
  },
  watch: {
    "channelForm.channelContinentID"(newVal,oldVal){
      this.selectedChannelIDs.push(newVal)
      this.handleImageSuccess()
      this.getRegionList(newVal,"channelContinentID")
    },
    "channelForm.channelCountryID"(newVal,oldVal){
      this.selectedChannelIDs.push(newVal)
      this.handleImageSuccess()
      this.getRegionList(newVal)
    },
    "channelForm.channelProvinceID"(newVal,oldVal){
      this.selectedChannelIDs.push(newVal)
      this.handleImageSuccess()
      this.getRegionList(newVal)

    },
    "channelForm.channelCityID"(newVal,oldVal){
      this.selectedChannelIDs.push(newVal)
      this.handleImageSuccess()
      this.getRegionList(newVal)
    },
    "channelForm.channelCountyID"(newVal,oldVal){
      this.selectedChannelIDs.push(newVal)
      this.handleImageSuccess()
      this.getRegionList(newVal)
    }
  },
  methods: {
    getRegionList:function(channelID,blockName = ""){
      let _this = this;
      getChannelUsableList({
        "parentChannelID":channelID
      }).then((response) => {
          if (response.code === 200) {
            console.log("地区信息：",response.data.list)
            if(blockName == 'channelContinentID'){
              _this.countryOptions = response.data.list
              _this.provinceOptions = []
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'channelCountryID'){
              _this.provinceOptions = response.data.list
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'channelProvinceID'){
              _this.cityOptions = response.data.list
              _this.countyOptions = []
              _this.townOptions = []
            }
            else if(blockName == 'channelCityID'){
              _this.countyOptions = response.data.list
              _this.townOptions = []
            }
            else if(blockName == 'channelCountyID'){
              _this.townOptions = response.data.list
            }else{              
              _this.continentOptions = response.data.list
              _this.countryOptions = []
              _this.provinceOptions = []
              _this.cityOptions = []
              _this.countyOptions = []
              _this.townOptions = []
            }
          } else {
            _this.$message({
              message: response.msg,
              type: 'error'
            })
          }
      })
      
    },
    rmImage() {
      this.emitInput('')
    },
    emitInput(val) {
      this.$emit('input', val)
    },
    handleImageSuccess() {
      this.emitInput(this.selectedChannelIDs)
    }
  }
}
</script>